<%@ page language="java" contentType="text/html; charset=utf-8" %>
<html>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<body>
    <div id="p2" style="padding:10px;">
        <p>panel content.</p>
        <p>panel content.</p>
    </div>
    <script>
        $('#p2').panel({
            width: 500,
            height: 150,
            minimizable: true,
            maximizable: true,
            title: 'My Panel',
            tools: [{
                iconCls: 'icon-add',
                handler: function () {
                    alert('new')
                }
            }, {
                iconCls: 'icon-save',
                handler: function () {
                    alert('save')
                }
            }, {
                onMaximize: function () {
                    alert('已变成最大了')
                }
            }]
        });
    </script>
    <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
        <div title="Tab1" style="padding:20px;display:none;">
            tab1
        </div>
        <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
            tab2
        </div>
        <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
            tab3
        </div>
    </div>
    <div id="t12" style="width:500px; height: 250px">
        <div title="Tab1" style="padding:20px;display:none;">
            tab1
        </div>
        <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
            tab2
        </div>
        <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
            tab3
        </div>
    </div>
    <script>
        //    $('#t12').tabs({
        //        border:true,
        //        onSelect:function(title){
        //            alert(title+' is selected');
        //        }
        //    });

        $('#t12').tabs('add', {
            title: 'New Tab',
            content: 'Tab Body',
            closable: true,
            tools: [{
                iconCls: 'icon-mini-refresh',
                handler: function () {
                    alert('refresh');
                }
            }]
        });
    </script>

    <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
        <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
            <h3 style="color:#0099FF;">Accordion for jQuery</h3>
            <p>Accordion is a part of easyui framework for jQuery.
                It lets you define your accordion component on web page more easily.</p>
        </div>
        <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
            content2
        </div>
        <div title="Title3">
            content3
        </div>
    </div>

    <div id="cc" class="easyui-layout" style="width:600px;height:400px;">
        <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
        <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
        <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
        <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
        <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
    </div>
    <script>
//        $('#cc').layout();
        // collapse the west panel
//        $('#cc').layout('collapse', 'west');
        $('#cc').layout('add',{
            region: 'west',
            width: 180,
            title: 'West Title',
            split: true,
            tools: [{
                iconCls:'icon-add',
                handler:function(){alert('add')}
            },{
                iconCls:'icon-remove',
                handler:function(){alert('remove')}
            }]
        });
    </script>
    <h3>这是一个分割线</h3>

    <a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>
    <div id="d12" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>
    <script>
        var value = $('#d12').progressbar('getValue');
        if (value < 100) {
            value += Math.floor(Math.random() * 10);
            $('#p').progressbar('setValue', value);
        }
    </script>
    <script type="text/javascript">
        function qq(value, name) {
            alert(value + ":" + name)
        }
    </script>

    <input id="ss" class="easyui-searchbox" style="width:300px"
           data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'"/>

    <div id="mm" style="width:120px">
        <div data-options="name:'all',iconCls:'icon-ok'">所有运动</div>
        <div data-options="name:'sports'">个别运动</div>
    </div>

    <h2>Hello World!</h2>
    <div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
         title="My Panel" data-options="iconcls:'icon-save',collapsible:true">
        The panel content
    </div>


    <div id="ww" class="easyui-draggable" data-options="handle:'#ceshi'" style="width:100px;height:100px">
        <div id="ceshi" style="background:#ccc;">cehsi</div>
    </div>
    <div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">
        <div id="title" style="background:#ccc;">title</div>
    </div>

    <div id="oo" style="width: 100px;height: 100px;">
        <div id="titl" style="background: #ccc;">beautiful</div>
    </div>

    <script>
        $("#oo").draggable({
            handle: "#titl"
        })
    </script>

    <div id="d1">imd1</div>
    <div id="d3">imd3</div>
    <div id="dd1" class="easyui-droppable" data-options="accept:'#d1,#d3'" style="width:100px;height:100px;"></div>
    <div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600"
         style="width:100px;height:100px;border:1px solid #ccc;"></div>

    <div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10"
         style="background:#efefef;border:1px solid #ccc;"></div>


    </body>
</html>
